<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>奶龙朋友</title>
	<link href="../assets/css/theme.css" rel="stylesheet" type="text/css"/>
    <link href="../assets/css/bootstrap.min.css" rel="stylesheet"  type="text/css">
	<script src="../js/jquery.min.js"></script>
	<script src="../js/bootstrap.bundle.min.js"></script>
	<script src="../js/theme.js"></script>
</head>
<body>
	<!-- 插入导航栏和底部 -->
	<script>setInnerPage()</script>
    <!-- 首页 -->
    <section id="home" class="container mt-5 pt-5">
		<a name = "friends"></a>
        <div class="row align-items-center">
            <div class="col-md-6">
                <h1 class="display-4">小七简介</h1>
                <p class="lead">3D动画片《奶龙》的重要角色，男主角之一。</p>
            </div>
            <div class="col-md-6">
                <img src="../assets/img/nailong_poster2.jpeg" class="img-fluid" alt="奶龙朋友主图">
            </div>
        </div>
    </section>

    <!-- 奶龙介绍 -->
	<a name = "friends"></a>
    <section id="intro" class="container my-5 dragon-pattern py-5">
		<h2 class="text-center mb-4">🌟 邂逅小七 🌟</h2>
        <div class="row row-cols-1 row-cols-md-3 g-4">
    		<!-- 奶龙搞笑 -->
            <div class="col">
                <div class="dragon-card h-100 p-3">
                    <h4>名字</h4>
                    <p>小七。</p>
					<img class="img-fluid" src="../assets/img/xiaoqi.jpeg"/>
                </div>
            </div>
    		<!-- 奶龙动画 -->
            <div class="col">
                <div class="dragon-card h-100 p-3">
                    <h4>形象</h4>
                    <p>‌小七是3D动画片《奶龙》中的重要角色之一，是一位活泼搞笑、富有正义感、积极向上、酷爱发明的地球少年‌‌</p>
                </div>
            </div>
    		<!-- 奶龙冒险 -->
    		<div class="col">
    		    <div class="dragon-card h-100 p-3">
    		        <h4>特征</h4>
    		        <p>他拥有圆圆的脑袋、黄色皮肤、褐色眼睛和黑色头发，身材瘦小但充满灵动之感‌。</p>
    		    </div>
    		</div>
			<div class="col">
			  <div class="dragon-card h-100 p-3" 
			       style="width: 1300px;   /* 直接控制卡片宽度 */
			              height: 500px;  /* 直接控制卡片高度 */
			              padding: 1.5rem !important;">  <!-- 调整内边距 -->
			    <h4>与奶龙的故事</h4>
			    <p>奶龙与小七在风景如画的龙村相遇...</p>
			  </div>
			</div>
			<a name ="story"></a>
        </div>
    </section>
</body>
</html>